<script setup>
import { ref } from 'vue'

defineProps({
  msg: String,
})

const count = ref(0)
const text = ref('<h1>哈哈</h1>')
const stu = ref([
  {
    name: 'zhangsan',
    age: 18,
    sn: 123
  },
  {
    name: 'zhangsan',
    age: 18,
    sn: 123
  },
  {
    name: 'zhangsan',
    age: 18,
    sn: 123
  },
])
const imgs = ref('https://www.scujj.edu.cn/files/image/20240702/3974bdf9-5d62-427f-be6c-80159a44d8d8.jpg');
const fnn = ()=>{
  // 组员做了一个修改
  // 第一组员写代码了
  // 第二写代码了

  // 我的分支
  alert("点击事件触发了")
}
const username = ref('')
</script>

<template>
  <h1>{{ msg }}</h1>

  <div class="card">
    <button type="button" @click="count++">count is {{ count }}</button>
    <button type="button" @click="count--">count is {{ count }}</button>
  </div>
<!--  v-text-->
  <div>{{text}}</div>
  <div v-text="text"></div>
<!--  v-html-->
  <div v-html="text"></div>
<!--  v-if-->
  <div v-if="count>0"> count 大于0</div>
  <div v-else-if="count===0"> count 等于0</div>
  <div v-else> count 小于0</div>

  <div v-show="count===0">v-show count 等于0</div>

<!--  v-for-->
  <table border="1" cellspacing="0">
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>学号</th>
    </tr>
    <tr v-for="item in stu">
      <td>{{item.name}}</td>
      <td>{{item.age}}</td>
      <td>{{item.sn}}</td>
    </tr>
  </table>

<!-- v-bind -->
  <img src="../assets/vue.svg">
  <img v-bind:src="imgs">
  <img :src="imgs">
<!-- v-on -->
  <button @click="fnn">点击事件</button>
<!--  v-model-->
  <input v-model="username" placeholder="请输入">
  <div>{{username}}</div>
</template>

<style scoped>
.read-the-docs {
  color: #888;
}
</style>
